<template>
    <div>
        <h1>健康理疗</h1>
        项目名称<input type="text" v-model="date.Jname">
        <input type="button" value="查询" @click="cx">
        <input type="button" value="批量修改" @click="Upda">
      <table>
        <thead>
            <tr>
                <td><input type="checkbox" v-model="getSelection" @change="AllTO"></td>
                <td>项目名称</td>
                <td>服务人数</td>
                <td>服务时长</td>
                <td>项目说明</td>
                <td>状态</td>
                <td>删除状态</td>
                <td>操作</td>
           
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in list">
                <td><input type="checkbox" :value="a.jid" v-model="idlist" @change="Checkone"></td>
                <td>{{a.jname}}</td>
                <td>{{a.person}}</td>
                <td>{{a.time}}</td>
                <td>{{a.jsm}}</td>
                <td>{{a.start}}</td>
                <td>{{a.iDelet}}</td>
                <td><input type="button" value="删除" @click="de(a.jid)"></td>
           
            </tr>
        </tbody>
      </table>
      <input type="button" value="首页" @click="fanye(1)">
     <input type="button" value="上一页" @click="fanye(2)">
     <input type="button" value="下一页" @click="fanye(3)">
     <input type="button" value="尾页" @click="fanye(4)">
     一共{{datalist.pount}}页,一共{{datalist.count}}行,当前第{{date.index}}页,当前第{{date.size}}行
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted}from"vue";
import axios from "axios";
//批量修改
const Upda=()=>{
    axios.get('https://localhost:7084/api/Jkang/UpdateRange',{params:{idstring:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('修改成功');
            Show();
        }else{
            alert('修改失败');
        }
    })
      
}









const getSelection=ref(false);
const idlist=ref<number[]>([]);
//全选反选
const AllTO=()=>{
    if(getSelection.value){
        list.value.forEach(element=>{
            idlist.value.push(element.jid);
        })
    }else{
        idlist.value=[];
    }
}
const Checkone=()=>{
    if((idlist.value.length)==list.value.length){
        getSelection.value=true;
    }else{
        getSelection.value=false;
    }
}












//逻辑删除
const de=(jid:any)=>{
    if(confirm('确认删除吗')){
        axios.delete('https://localhost:7084/api/Jkang/Delete',{params:{Jid:jid}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show();
            }else{
                alert('删除失败');
            }
    })
    }
   
}




//模糊查询
const cx=()=>{
    date.value.index=1;
    Show();
}



//分页
const fanye=(a:any)=>{
   if(a==1){
    date.value.index=1;
    Show();
   }
   if(a==2){
    if(date.value.index>1){
        date.value.index-=1;
        Show();
    }
   }
   if(a==3){
    if(date.value.index<datalist.value.pount){
        date.value.index+=1;
        Show();
    }
   }
   if(a==4){
    date.value.index=datalist.value.pount;
    Show();
   }
}





//显示
const list=ref([{
    "jid": 0,
  "jstring": "string",
  "jname": "string",
  "person": 0,
  "time": 0,
  "jsm": "string",
  "start": true,
  "iDelet": true
}])
const date=ref({
    index:1,
    size:2,
    Jname:""
})
const datalist=ref({
    count:0,
    pount:0
})
onMounted(()=>{
    Show();
})
const Show=()=>{
    axios.get('https://localhost:7084/api/Jkang/GetAll',{params:date.value}).then(res=>{
        list.value=res.data.data;
        datalist.value.count=res.data.count;
        datalist.value.pount=Math.ceil(res.data.count/date.value.size);
    })
}

</script>

<style scoped>

</style>